<template>
    <div style="width: 55%; margin-left: 20px">
      <el-card class="present-card" style="height: 236px;">
        <div style="height: 50px;display: flex;">
            <h3 style="line-height: 20px; ">分类结果</h3>
            <div style="margin-left: 500px; display: flex;">
              <h3 >选择模型:</h3>
              <el-select v-model="value" placeholder="请选择"
              style="margin-top: 10px;">
                  <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
            </div>
        </div>
        <div v-show="value == '选项1'" style="height: 140px; margin-top: 10px;">
          <el-descriptions :data="model_1" :column="2" :label-style="LS" :content-style="LD"
          style="position: relative; top: 30px;">
            <el-descriptions-item label="模型名称">{{ model_1.model_kind }}</el-descriptions-item>
            <el-descriptions-item label="是否安全">{{ model_1.Is_safe }}</el-descriptions-item>
            <el-descriptions-item label="判别种类">{{ model_1.result_kind }}</el-descriptions-item>
            <el-descriptions-item label="预测准确率">{{ model_1.accuracy }}</el-descriptions-item>
        </el-descriptions>
        </div>
        <div v-show="value == '选项2'" style="height: 140px; margin-top: 10px;">
          <el-descriptions :data="model_2" :column="2" :label-style="LS" :content-style="LD"
          style="position: relative; top: 30px;">
            <el-descriptions-item label="模型名称">{{ model_2.model_kind }}</el-descriptions-item>
            <el-descriptions-item label="是否安全">{{ model_2.Is_safe }}</el-descriptions-item>
            <el-descriptions-item label="判别种类">{{ model_2.result_kind }}</el-descriptions-item>
            <el-descriptions-item label="预测准确率">{{ model_2.accuracy }}</el-descriptions-item>
        </el-descriptions>
        </div>
        <div v-show="value == '选项3'" style="height: 140px; margin-top: 10px;">
          <el-descriptions :data="model_3" :column="2" :label-style="LS" :content-style="LD"
          style="position: relative; top: 30px;">
            <el-descriptions-item label="模型名称">{{ model_3.model_kind }}</el-descriptions-item>
            <el-descriptions-item label="是否安全">{{ model_3.Is_safe }}</el-descriptions-item>
            <el-descriptions-item label="判别种类">{{ model_3.result_kind }}</el-descriptions-item>
            <el-descriptions-item label="预测准确率">{{ model_3.accuracy }}</el-descriptions-item>
        </el-descriptions>
        </div>
        <div v-show="value == '选项4'" style="height: 140px; margin-top: 10px;">
          <el-descriptions :data="model_4" :column="2" :label-style="LS" :content-style="LD"
          style="position: relative; top: 30px;">
            <el-descriptions-item label="模型名称">{{ model_4.model_kind }}</el-descriptions-item>
            <el-descriptions-item label="是否安全">{{ model_4.Is_safe }}</el-descriptions-item>
            <el-descriptions-item label="判别种类">{{ model_4.result_kind }}</el-descriptions-item>
            <el-descriptions-item label="预测准确率">{{ model_4.accuracy }}</el-descriptions-item>
        </el-descriptions>
        </div>
        </el-card>
        <br>
    </div>
  </template>
    
    <script>
    export default {
      data() {
        return {
          model_1: [],
          model_2: [], 
          model_3: [], 
          model_4: [],   
          baseURL: "http://localhost:8000/",
          LS:{color:'#000'},
          LD:{size:'xxx-larger'},
          ID:[],
          options:[
            {
                value:'选项1',
                label:'ResNet'
            },
            {
                value:'选项2',
                label:'随机森林'
            },
            {
                value:'选项3',
                label:'k近邻'
            },
            {
                value:'选项4',
                label:'SVM'
            },
          ],
          value: '选项1'
        }
      },
    
      mounted() {
        this.savedata();
        this.getMessages();
      },
    
      methods: {
        savedata() {
          var item = localStorage.getItem("packagename");
          if(item == undefined){
            this.ID = "";
          } else {
            var parse = JSON.parse(item);
            this.ID = parse["Apk_info_id"];
          }
        },
        getMessages:function(){
          //记录this的地址
          let that = this
          //使用Axios实现Ajax请求
          that.axios.get(that.baseURL+"apk/model_predict/"+that.ID+"/")
          .then(function(res){
            //请求成功后执行的函数
            that.model_4 = res.data[0];
            that.model_3 = res.data[1];
            that.model_2 = res.data[2];
            that.model_1 = res.data[3];

          })
          .catch(function(err){
            //请求失败后执行的函数
            console.log(err)
          })
        },
      }
    
    }
    </script>
    
    <style>
    
    </style>
  